<template>
  <div>
    <!-- 使用组件 -->
    <!-- 书写冒号：表示使用v-bind 使引号内的环境为js环境表达式 -->
    <MyHeader :num="1" name="liA"></MyHeader>
    <hr />
    <MyCount v-bind="person"></MyCount>
    <!-- 如果传递的是一个对象的话 直接使用v-bind赋值对象 则v-bind会把对象的键值对依次拿出来,设置给当前的模板作为属性 -->
    <!--上面解析的效果： <MyCount v-bind="{ name: xxx, age: xxx , sex:xxx }"></MyCount> -->
  </div>
</template>
<script>
//引入组件
import MyHeader from "@/components/MyHeader";
import MyCount from "@/components/MyCount";
// App汇总所有组件
export default {
  name: "App",
  data() {
    return {
      numbers: 1,
      person: {
        name: "小明",
        age: 18,
        sex: "男",
      },
    };
  },
  //注册组件
  components: { MyHeader, MyCount },
  methods: {},
};
</script>

<style></style>
